<style lang="scss">
    .line-left {
        // float: left;
        font-size: 32rpx;
        color: #999999;
        margin: 0 25rpx;
    }
    .picker {
        font-size: 32rpx;
        color: #333333;
        margin-left: 20rpx;
        float: left;
        width: 73%;
    }
    .v-line {
        border-bottom: 2rpx solid #e6e6e6;
        overflow: hidden;
        line-height: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        input {
            font-size: 30rpx;
            // position: relative;
            // top: 18rpx;
            // left: 30rpx;
        }
    }
    .sub {
        position: fixed;
        bottom: 100rpx;
        width: 570rpx;
        left: 90rpx;
        background: #ff6702;
        color: #ffffff;
        text-align: center;
        font-size: 30rpx;
        line-height: 88rpx;
        border-radius: 10rpx;
    }
    .v-sbox {
        width: 700rpx;
        position: fixed;
        z-index: 999;
        background: #fff;
        padding: 0 25rpx 25rpx 25rpx;
        border: 1px solid #eee;
        border-top: none;
        max-height: 300rpx;
        overflow: auto;
        .v-list {
            font-size: 30rpx;
            line-height: 55rpx;
        }
        view:active {
            color: #ff6702;
        }
    }
</style>
<template>
    <view>
        <view class="v-line">
            <view class="line-left">地址</view>
            <!-- <picker value="{{index1}}" range="{{array1}}" range-key="{{'areaname'}}" @change="changexq">
        <view class="picker">
      {{array1[index1].areaname}}
    </view>
  </picker> -->
            <input type="text" :value="xqname" @input="serch" placeholder="请输入小区名搜索" />
        </view>
        <cover-view class="v-sbox" v-if="show">
            <cover-view class="v-list" v-for="(item, index) in xqlist" :key="index" @tap="choose(item)">{{ item.areaname }}</cover-view>
        </cover-view>
        <map id="map" :longitude="markers[0].longitude" :latitude="markers[0].latitude" scale="16" bindcontroltap="controltap"
            :markers="markers" @markertap="markertap" @regionchange="regionchange" @bindtap="bindtap" show-location
            style="width: 700rpx; height: 300px;margin:20rpx auto;"></map>

        <view class="sub" @tap="sub">确认</view>
    </view>
</template>
<script>
    import {
        areaKeyword
    } from '../../api/api';
    export default {
        data() {
            return {
                array1: '',
                index1: 0,
                latitude: '',
                longitude: '',
                xqlist: [],
                show: false,
                xqname: '',
                markers: [{
                    iconPath: '/static/img/other.png',
                    id: 0,
                    latitude: 32.050678,
                    longitude: 118.792198,
                    width: 30,
                    height: 30,
                    areaid: '',
                    village: '',
                    callout: {
                        content: '',
                        fontSize: 12,
                        color: '#000000',
                        bgColor: '#ffffff',
                        borderRadius: 4,
                        padding: 4,
                        alpha: 1
                    },
                    label: {
                        content: '',
                        fontSize: 12,
                        color: '#000000',
                        bgColor: '#ffffff',
                        borderRadius: 4,
                        padding: 4
                    }
                }]
            };
        },
        onLoad(option) {
            // getarea({}).then(res=>{
            //   //console.log(res)
            //   this.array1=res.data.data
            //   this.$apply()
            // })
            console.log(option)
            if (option.name == 'undefined' || option.name == '') {

            } else {
                this.markers[0].latitude = option.latitude;
                this.markers[0].longitude = option.longitude;
                this.markers[0].village = option.name;
                this.xqname = option.name;
                this.markers[0].label.content = option.name;
                this.markers[0].callout.content = option.name;
            }
        },
        methods: {
            // 地图视野发生变化时触发
            regionchange(e) {
                console.log('视野发生变化', e)
            },
            // 点击标记时触发
            markertap(e) {
                console.log('点击标记时触发', e)
                if (this.markers[0].callout.content == '') {
                    this.markers[0].callout.alpha = 0
                } else {
                    this.markers[0].callout.alpha = 1
                }
            },
            // 点击地图选点
            bindtap(e) {
                console.log('点击地图选点', e)
            },
            // changexq(e) {
            //     // //console.log(this.arealist)
            //     this.index1 = e.detail.value;
            //     this.area = this.array1[e.detail.value].id;
            //     this.markers[0].latitude = this.array1[e.detail.value].lat;
            //     this.markers[0].longitude = this.array1[e.detail.value].lng;
            //     this.markers[0].areaid = this.array1[e.detail.value].id;
            //     this.markers[0].village = this.array1[e.detail.value].areaname;
            // },
            sub() {
                if (this.markers[0].village == '') {
                    wx.showToast({
                        title: '未找到该小区',
                        icon: 'none'
                    });
                    return;
                } else {
                    var pages = getCurrentPages();
                    var prevPage = pages[pages.length - 2]; //上一个页面
                    var info = prevPage.data; //取上页data里的数据也可以修改
                    console.log(prevPage);
                    prevPage.setData({
                        xq: this.markers[0].village,
                        xqid: this.markers[0].areaid,
                        'formItem[5].value': this.markers[0].areaid,
                        areaname: this.markers[0].village,
                        'info.village': this.markers[0].village,
                        'loc.latitude': this.markers[0].latitude,
                        'loc.longitude': this.markers[0].longitude,
                        'loc.name': this.markers[0].village,
                        'loc.address': this.markers[0].village,
                        'loc.areaid': this.markers[0].areaid,
                    });
                    setTimeout(() => {
                        wx.navigateBack({
                            delta: 1
                        });
                    }, 500);
                }
            },
            serch(e) {
                // console.log(e.detail.value)
                this.sqname = e.detail.value;
                areaKeyword({
                    areaname: e.detail.value
                }).then(res => {
                    console.log(res);
                    if (res.length != 0) {
                        this.show = true;
                        this.xqlist = res;
                    }
                });
            },
            choose(e) {
                this.markers[0].latitude = e.lat;
                this.markers[0].longitude = e.lng;
                this.markers[0].areaid = e.id;
                this.markers[0].village = e.areaname;
                this.xqname = e.areaname;
                this.show = false;

                this.markers[0].label.content = e.areaname;
                this.markers[0].callout.content = e.areaname;
                console.log(this.markers);
            }
        }
    };
</script>
